<template>
<div style="width: 100%;">
    <el-breadcrumb separator="/" v-loading="loading">
        <el-breadcrumb-item :to="{ path: '/Main' }" >首页</el-breadcrumb-item>
        <el-breadcrumb-item >转正审批</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <div style="width: 1200px;">
        <el-row :gutter="20">
            <el-col :span="2" :offset="0" style="display: flex; align-items: center; justify-content: right;">
                <span>姓名:</span>
            </el-col>
            <el-col :span="5" :offset="0">
                <el-input v-model="from.Name" style="width: 240px" placeholder="请输入姓名" />
            </el-col>
            <el-col :span="2" :offset="0" style="display: flex; align-items: center; justify-content: right;">
            <span>部门:</span>
        </el-col>
        <el-col :span="5" :offset="0">
            <el-select v-model="from.Department" placeholder="请选择部门" style="width: 240px" @change="handePosition">
            <el-option
                v-for="item in Department"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
            </el-select>
        </el-col>
        <el-col :span="2" :offset="0" style="display: flex; align-items: center; justify-content: right;">
            <span>职位:</span>
        </el-col>
        <el-col :span="5" :offset="0">
            <el-select v-model="from.Position" placeholder="请选择职位" style="width: 240px">
            <el-option
                v-for="item in Positions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
            </el-select>
        </el-col>
        </el-row>
        <br>
        <el-row :gutter="20">
            <el-col :span="2" :offset="0" style="display: flex; align-items: center; justify-content: right;">
                <span>入职日期:</span>
            </el-col>  
            <el-col :span="5" :offset="0">
                <el-date-picker
                    v-model="from.Hiredate"
                    type="date"
                    style="width: 240px"
                    placeholder="请选择入职日期"
                    @change="DateChand"
                />
            </el-col>
            <el-col :span="2" :offset="0" style="display: flex; align-items: center; justify-content: right;">
                <span>申请日期:</span>
            </el-col>
            <el-col :span="5" :offset="0">
                <el-date-picker
                    v-model="from.ApplicationDate"
                    type="date"
                    style="width: 240px"
                    placeholder="请选择入职日期"
                    @change="DateChands"
                />
            </el-col>
            <el-col :span="2" :offset="0" style="display: flex; align-items: center; justify-content: right;">
                <span>审批状态:</span>
            </el-col>        
            <el-col :span="5" :offset="0">
                <el-select v-model="from.AppStatus" placeholder="请选择审批状态" style="width: 240px">
                    <el-option label="待提交" value="待提交"></el-option>
                    <el-option label="待审批" value="待审批"></el-option>
                    <el-option label="已同意" value="已同意"></el-option>
                    <el-option label="已拒绝" value="已拒绝"></el-option>
                </el-select>
            </el-col>            
        </el-row>
        <br>
        <el-row :gutter="20">
            <el-col :span="2" :offset="0">

            </el-col>
            <el-col :span="5" :offset="0">

            </el-col>
            <el-col :span="2" :offset="0">

            </el-col>
            <el-col :span="5" :offset="0">

            </el-col>
            <el-col :span="2" :offset="0">

            </el-col>
            <el-col :span="5" :offset="0" style="display: flex; align-items: center; justify-content: center;">
                <el-button type="primary" size="default" @click="GetTable">查询</el-button>
                <el-button type="primary" size="default" @click="Null">重置</el-button>
            </el-col>
        </el-row>
        
    </div>
  <div style="width: 1200px;">
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="StaffName" label="姓名" width="center" />
        <el-table-column prop="Department" label="部门" width="center" />
        <el-table-column prop="Position" label="职位" width="center" />
        <el-table-column prop="Hiredate" label="入职日期" width="center" >
            <template v-slot="scoped">
                <span>{{ scoped.row.Hiredate.substring(0,10) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="ApplicationDate" label="申请日期" width="center" >
            <template v-slot="scoped">
                <span v-if="scoped.row.ApplicationDate">{{ scoped.row.ApplicationDate.substring(0,10) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="AppStatus" label="审批状态" width="center" />
        <el-table-column prop="CreatedDate" label="创建时间" width="center" >
            <template v-slot="scoped">
                <span v-if="scoped.row.CreatedDate">{{ scoped.row.CreatedDate.substring(0,10) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="Approver" label="审批人" width="center" />
        <el-table-column label="操作" width="230px" >
            <template v-slot="scoped">
                <el-button type="primary" link size="default" v-if="scoped.row.AppStatus=='待审批'" @click="show(scoped.row.Id)">查看</el-button>
                <el-button type="primary" link size="default" v-else @click="shows(scoped.row.Id)">查看</el-button>
                <el-button type="primary" link size="default" v-if="scoped.row.AppStatus=='待审批'" @click="yes(scoped.row)">通过</el-button>
                <el-button type="primary" link size="default" disabled v-else>通过</el-button>
                <el-button type="primary" link size="default" v-if="scoped.row.AppStatus=='待审批'" @click="no(scoped.row)">拒绝</el-button>
                <el-button type="primary" link size="default" disabled v-else>拒绝</el-button>
            </template>
        </el-table-column>
    </el-table>
  </div>
  <el-pagination
      v-model:current-page="Page.PageIndex"
      v-model:page-size="Page.PageSize"
      :page-sizes="[15, 20, 30, 40]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Page.TotalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import { ElMessage, type ComponentSize } from 'element-plus'
import { fr } from 'element-plus/es/locales.mjs';

const background = ref(false)
const disabled = ref(false)
const size = ref<ComponentSize>('default')
const handleSizeChange = (val: number) => {
    Page.value.PageSize = val;
    GetTable()
}
const handleCurrentChange = (val: number) => {
    Page.value.PageIndex = val;
    GetTable()
}

const Page = ref({
    PageIndex: 1,
    PageSize: 15,
    TotalCount: 0,
    TotalPage: 0
})

const tableData = ref([])

const from = ref({
    Name: null,
    Department: null,
    Position: null,
    Hiredate: null,
    ApplicationDate: null,
    AppStatus: null,
    Stat:null,
    buttonArray: []
})

const GetTable = () => {
    axios.get("/pread/api/ReadFullManage/GetListFullsManage", {
        params: {
            Name: from.value.Name,
            DepartmentId: from.value.Department,
            PositionId: from.value.Position,
            Hiredate: from.value.Hiredate,
            ApplicationDate: from.value.ApplicationDate,
            AppStatus: from.value.AppStatus,
            PageIndex: Page.value.PageIndex,
            PageSize: Page.value.PageSize,
            Stat:from.value.Stat
        }
    }).then(res => {
        Page.value.TotalCount = res.data.Data.TotalCount
        Page.value.TotalPage = res.data.Data.TotalPage
        tableData.value = res.data.Data.Data
        loading.value=false
    })
}

const DateChand = (date:any) => {
    const localDate = date.toLocaleString(); 
    from.value.Hiredate = localDate
}

const DateChands = (date:any) => {
    const localDate = date.toLocaleString(); 
    from.value.ApplicationDate = localDate
}

const Department = ref([
    { label: '人事部', value: 1 },
    { label: '市场部', value: 2 },
    { label: '财务部', value: 3 },
])

const Positions = ref([
    { label: '部长', value: 1, Parent: 1 },
    { label: '副部长', value: 2, Parent: 1 },
    { label: '经理', value: 3, Parent: 1 },
    { label: '部长', value: 4, Parent: 2 },
    { label: '副部长', value: 5, Parent: 2 },
    { label: '经理', value: 6, Parent: 2 },
    { label: '部长', value: 7, Parent: 3 },
    { label: '副部长', value: 8, Parent: 3 },
    { label: '经理', value: 9, Parent: 3 },
])

interface Pos{
    value: number,
    label: string
}
const Position = ref<Pos[]>([])

const handePosition = (item: any) => {
    from.value.Position = null;
    Position.value = Positions.value.filter(positions => positions.Parent == item);
}

const Null = () => {
    from.value.Name = null
    from.value.Department = null
    from.value.Position = null
    from.value.Hiredate = null
    from.value.ApplicationDate = null
    from.value.AppStatus = null
    Position.value = [];
    GetTable()
}

const router = useRouter();
const show = (Id: any) => {
    router.push("/FullApprovalShow?id="+Id)
}

interface approvals{
    ApprovalRecordId: number,
    CompanyID: string| null,
    User_Id: number| null,
    ApprovalResult: string| null,
    ApprovalNotes: string| null,
    Subgrantor: string| null,
    Approver: string| null,
    ContractId: number| null,
    MaterialStoreId: number| null,
    MaterialRequisitionId: number| null,
    PaymentId: number| null,
    PersonnelId: number| null
}

const approval = ref<approvals>({
    ApprovalRecordId: 0,
    CompanyID: null,
    User_Id: null,
    ApprovalResult: null,
    ApprovalNotes: null,
    Subgrantor: null,
    Approver: localStorage.username,
    ContractId: null,
    MaterialStoreId: null,
    MaterialRequisitionId: null,
    PaymentId: null,
    PersonnelId: null
})

const yes = (tes: any) => {
    approval.value.ApprovalResult = "同意并终止审批"
    approval.value.PersonnelId = tes.Id
    axios.post("/pwrite/api/Approval/AddFullApproval", approval.value).then(res => {
        if (res.data > 0) {
            ElMessage({
                message: "审批成功",
                type: "success",
                duration: 1000
            })
            GetTable()
        } else {
            ElMessage({
                message: "审批失败",
                type: "warning",
                duration: 1000
            })
            GetTable()
        }
    })
}

const no = (row:any) => {
    approval.value.ApprovalResult="拒绝"
    approval.value.PersonnelId = row.Id
    axios.post("/pwrite/api/Approval/AddEntryApproval",approval.value).then(res => {
        if (res.data > 0) {
            ElMessage({
                message: "审批成功",
                type: "success",
                duration:1000
            })
            GetTable()
        } else {
            ElMessage({
                message: "审批失败",
                type: "warning",
                duration:1000
            })
            GetTable()
        }
    })
}

const shows = (id:any) => {
    router.push("FullApprovalView?id="+id)
}
const loading = ref(true)
onMounted(() => {
    GetTable()
})
</script>
<style scoped>
body {
  margin: 0;
}

/* 调整加载图标的位置 */
.example-showcase .el-loading-mask {
  z-index: 9999;
  position: fixed;  /* 固定在屏幕上 */
  top: 50%;  /* 垂直居中 */
  left: 50%;  /* 水平居中 */
  transform: translate(-50%, -50%); /* 使图标完全居中 */
}
</style>